<template>
  <!-- 文章卡片 -->
  <div
    class="cdc-article-panel user-article-item"
  >
    <a
      class="cdc-article-panel__link"
      rel="noreferrer"
      @click="clickArticle"
    ></a>
    <div class="cdc-article-panel__inner">
      <div class="user-article-item-content cdc-article-panel__main">
        <div class="user-article-item-title-wrap cdc-article-panel__title">
          <img
            class="article-card-top-img"
            v-if="article.toppingStat === 1 && router.currentRoute.value.path === '/'"
            src="https://cdn.cnbj1.fds.api.mi-img.com/aife/technology-platform-fe/preview/dist/static/commandImg.99adc700.svg"
          />
          <span class="user-article-item-title">{{article.title}}</span>
          <!--          TODO 看一下下面article.status的类型-->
          <span v-if="article.status != 1" >
            <span class="user-article-item-tag">
              {{article.status == 0 ? '(草稿)' : '(审核中)'}}
            </span>
          </span>
        </div>
        <div class="user-article-item-value-wrap cdc-article-panel__media">
          <div class="user-article-item-value-text cdc-article-panel__desc">
            {{article.summary}}
          </div>
        </div>
        <div class="user-article-item-footer cdc-article-panel__infos">
          <div class="user-article-item-footer-left cdc-article-panel__user">
            <span
              class="article-title-other-name cdc-avatar large cdc-article-panel__user-avatar circle"
            >
              <a
                class="cdc-avatar__inner"
                :style="{'background-image': 'url(' +article.authorAvatar + ')' }"
                :href="'/user/' + article.author"
              ></a>
            </span>
            <a class="article-title-wrap cdc-article-panel__user-name" :href="'/user/' + article.author">{{article.authorName}}</a>
          </div>
          <div class="cdc-article-panel__date">
            {{format(new Date(Number(article.createTime)), "yyyy年MM月dd日 HH:mm")}}
          </div>

          <div class="cdc-icon__list cdc-article-panel__operate d-flex" @click="router.push('/article/detail/'+article.articleId)">
            <div class="article-show-wrap">
              <!--  阅读计数  -->
                <img
                  class="read-comment-praise"
                  src=""
                />
                <span class="cdc-icon__number">{{article.count.readCount}}</span>
            </div>
            <div class="article-show-wrap">
              <!--  评论计数  -->
                <img
                  class="read-comment-praise"
                  src=""
                />
                <span class="cdc-icon__number">{{article.count.commentCount}}</span>
            </div>
            <div class="article-show-wrap">
              <!--  点赞计数  -->
              <!--  fixme 后续优化为可以直接在列表页进行点赞/取消  -->
                <img
                  class="read-comment-praise"
                  src=""
                />
                <span class="cdc-icon__number">{{article.count.praiseCount}}</span>
            </div>
          </div>

          <div
            class="user-article-item-tag-wrap cdc-tag-links cdc-article-panel__tags  hidden-when-screen-small"
          >
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="cdc-tag-links__icon m-0"
            >
              <mask
                id="mask0_1118_14146"
                style="mask-type: alpha"
                maskUnits="userSpaceOnUse"
                x="0"
                y="0"
                width="16"
                height="16"
              >
                <rect width="16" height="16" fill="#D9D9D9" />
              </mask>
              <g mask="url(#mask0_1118_14146)">
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M13.7262 8.18068L12.5948 3.6552L8.06934 2.52383L2.45929 8.13388L8.11614 13.7907L13.7262 8.18068ZM13.4194 2.83058L14.8337 8.48743L8.11614 15.2049L1.04508 8.13388L7.76259 1.41636L13.4194 2.83058Z"
                  fill="#495770"
                />
                <circle
                  cx="10.5911"
                  cy="5.659"
                  r="1"
                  transform="rotate(45 10.5911 5.659)"
                  fill="#495770"
                />
              </g>
            </svg>

            <div class="cdc-tag-links__item" v-for="tag in article.tags" :key="tag.tagId">
              <a
                :href="'/article/tag/' + tag.tag"
                rel="article-tag"
                class="user-article-item-tag cdc-tag-links__item ml-2 mr-0"
              >{{tag.tag}}</a>
            </div>
          </div>
        </div>
      </div>
      <div class="user-article-img cdc-article-panel__object" v-if="article.cover">
        <span
          class="cdc-article-panel__object-thumbnail"
          :style="{'background-image': 'url(' + article.cover + ')'}"
        ></span>
      </div>
<!--      <script type="text/javascript" th:inline="javascript">-->
<!--        // 有图的时候加一点 margin-->
<!--        $(-->
<!--          ".cdc-article-panel__main:has(+ .cdc-article-panel__object) .cdc-article-panel__infos"-->
<!--        ).css("margin-top", "20px")-->
<!--      </script>-->
    </div>
  </div>
</template>

<script setup lang="ts">

import { format } from 'date-fns';
import { useRouter } from 'vue-router'
import type { ArticleType } from '@/http/ResponseTypes/ArticleType/ArticleType'
import {ArticleTypeNumberEnum} from "@/constants/ArticleTypeEnumConstants";
import {doGet} from "@/http/BackendRequests";
import type {CommonResponse} from "@/http/ResponseTypes/CommonResponseType";
import {ARTICLE_COLUMN_RELATION_URL} from "@/http/URL";
import {messageTip} from "@/util/utils";

const router = useRouter()

const props = defineProps<{
  article: ArticleType
}>()

const clickArticle = () =>{
  console.log(props.article.articleType)
  if(props.article.articleType === ArticleTypeNumberEnum.COLUMN){
    doGet<CommonResponse>(`${ARTICLE_COLUMN_RELATION_URL}/${props.article.articleId}`, {}).then(res=>{
      router.push(`/column/${res.data.result.columnId}/${res.data.result.section}`)
    }).catch(err=>{
      messageTip("获取专栏信息失败", "error")
      console.log(err)
    })
  }else{
    router.push('/article/detail/'+props.article.articleId)
  }
}

</script>

<style scoped>

</style>
